<template>
    <div>
        <el-table id="tableId" height="60vh" border fit stripe style="width: 100%" :data="pageList" :header-cell-style="{
            background: '#ccc', color: '#000000'
        }" :row-class-name="tableRowClassName">
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column show-overflow-tooltip width="100" label="序号" align="center">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip min-width=20 prop="entryName" label="当前项目" align="center" />
            <el-table-column show-overflow-tooltip min-width=20 prop="recipient" label="当前负责人" align="center" />
            <el-table-column show-overflow-tooltip min-width=20 prop="approvalTime" label="本项目进场时间" align="center" />
            <el-table-column show-overflow-tooltip min-width=20 prop="befores" label="上一项目点" align="center" />
            <el-table-column show-overflow-tooltip min-width=20 prop="projectLeader" label="上一负责人" align="center" />
            <el-table-column show-overflow-tooltip min-width=20 prop="applicationTime" label="申请转移时间" align="center" />
            <el-table-column show-overflow-tooltip min-width=20 prop="applicant" label="申请转移人" align="center" />
            <el-table-column show-overflow-tooltip min-width=20 prop="approver" label="审批人" align="center" />
            <el-table-column show-overflow-tooltip min-width=20 prop="number" label="编号" align="center" />



        </el-table>
        <!-- 分页器 -->
        <el-pagination style="padding: 8px;;" v-model:current-page="page" v-model:page-size="pageSize"
            :page-sizes="[10, 50, 500, 10000,]" layout="total, sizes, prev, pager, next, jumper" :total="list.length"
            :background="true" />

    </div>
</template>

<script setup>
import { defineProps, onMounted, ref, computed } from 'vue';
import { gettables, gettablebm, getzslist } from '../../sevce/user'
const props = defineProps({
    zhid: Number,
})

//获取数据
let list = ref([])
function gettable() {
    getzslist(props.zhid).then((res) => {
        list.value = res.data
    })
}
//分页
const pageSize = ref(50)
let page = ref(1)
let pageList = computed(() => {
    return list.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value);
})
onMounted(() => {
    console.log(props.id)
    gettable()
})
//斑马纹颜色
function tableRowClassName({ row, rowIndex }) {
    if (rowIndex % 2 !== 0) {
        return 'el-table__row--striped'
    }
}
</script>

<style lang="scss" scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}

::v-deep .el-table__body tr.el-table__row--striped td {
    background-color: #c0c4cc;
}

::v-deep .el-table__row {
    background: skyblue;
}

::v-deep .el-table__body tr:hover>td {
    background-color: #c0c4cc !important;
}
</style>